<template>
  <div class="nav-box">
    <!-- 左侧 -->
    <div class="nav-left">
      <div class="nav-item" v-for="(item, index) in menu.left" :key="index">
        <template v-if="item.children && item.children.length > 0">
          <el-dropdown @command="handleCommand($event, item)">
            <div class="el-dropdown-link">
              <div class="text-center">
                <svg v-if="item.icon" class="icon-svg" aria-hidden="true">
                  <use :xlink:href="'#' + item.icon" />
                </svg>
                <div>{{ item.name }}</div>
              </div>
              <el-icon class="font-12">
                <el-icon-arrow-down />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(c, i) in item.children" :key="i" :command="c.action">{{ c.name
                  }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <div v-else class="pointer" :class="{ active: item.active }" @click="dispatchFunc(item.action, item)">
          <div class="el-dropdown-link">
            <div class="text-center">
              <svg v-if="item.icon" class="icon-svg" aria-hidden="true">
                <use :xlink:href="'#' + item.icon" />
              </svg>
              <div class="l-14">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="nav-center">
      <div class="nav-item" v-for="(item, index) in menu.right" :key="index">
        <template v-if="item.children && item.children.length > 0">
          <el-dropdown @command="handleCommand($event, item)">
            <div class="el-dropdown-link">
              <div class="text-center">
                <svg v-if="item.icon" class="icon-svg" aria-hidden="true">
                  <use :xlink:href="'#' + item.icon" />
                </svg>
                <div>{{ item.name }}</div>
              </div>
              <el-icon class="font-12">
                <el-icon-arrow-down />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(c, i) in item.children" :key="i" :command="c.action + ',' + c.value">
                  <div class="flex-center">
                    <svg v-if="c.icon" class="icon-svg" aria-hidden="true">
                      <use :xlink:href="'#' + c.icon" />
                    </svg>
                    {{ c.name }}
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <div v-else class="pointer" :class="{ active: item.active }" @click="dispatchFunc(item.action, item)">
          <div class="el-dropdown-link">
            <div class="text-center">
              <svg v-if="item.icon" class="icon-svg" aria-hidden="true">
                <use :xlink:href="'#' + item.icon" />
              </svg>
              <div class="l-14">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="nav-right">
      <div class="nav-item">
        <el-popover :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
          <template #reference>
            <div class="scale-result-box">
              <p class="mb-7">{{ scaleValue }}%</p>
              <div>缩放</div>
            </div>
          </template>
          <template #default>
            <el-slider :min="min" :max="max" size="small" v-model="scaleValue" show-input @change="scaleView" />
          </template>
        </el-popover>
      </div>
      <div class="nav-item">
        <div class="el-dropdown-link pointer" @click="handlePreview">
          <div class="text-center">
            <svg class="icon-svg" aria-hidden="true">
              <use xlink:href="#l-attention" />
            </svg>
            <div class="l-14">预览</div>
          </div>
        </div>
      </div>
      <div class="nav-item">
        <div class="el-dropdown-link pointer" @click="handleEditStatus">
          <div class="text-center" :style="{ color: mapEditStatus.color }">
            <svg v-if="mapEditStatus.icon" class="icon-svg" :fill="mapEditStatus.color" aria-hidden="true">
              <use :xlink:href="'#' + mapEditStatus.icon" />
            </svg>
            <div class="l-14">{{ mapEditStatus.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { menu, dispatchFunc } from '../config/defaultNav'
  import { LockState } from '@meta2d/core'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  const mapEditConfig = {
    [LockState.None]: {
      name: '编辑',
      icon: 'l-unlock',
      color: "#000",
      locked: LockState.None
    },
    [LockState.DisableEdit]: {
      name: '预览',
      icon: 'l-lock',
      color: '#faad14',
      locked: LockState.DisableEdit
    },
    [LockState.Disable]: {
      name: '锁定',
      icon: 'l-wufayidong',
      color: '#f50000',
      locked: LockState.Disable
    },
  }

  interface LockConfig {
    name : string;
    icon : string;
    color : string;
    locked : LockState;
  }

  let mapEditStatus = ref<LockConfig>(mapEditConfig[LockState.None])

  /** 下拉菜单点击事件 */
  function handleCommand(command : string, data : any) {
    let [action, value] = command.split(',')
    let item = data.children.find((it : any) => (value ? it.value === value : it.action === action))
    item.icon && (data.icon = item.icon)
    dispatchFunc(action, item)
  }

  // 缩放
  const scaleValue = ref(0)
  const min = ref(1)
  const max = ref(100)
  const scaleView = (val : number) => {
    meta2d.scale(val / 100)
    // 将图元移动到图纸中央
    meta2d.centerView()
  }

  /** 获取图纸锁定状态 */
  function openFn() {
    let data = meta2d.data()
    let locked : LockState | number = data.locked || 0
    mapEditStatus.value = (mapEditConfig as any)[locked]
  }

  /** 改变图纸状态 */
  function handleEditStatus() {
    let locked = mapEditStatus.value.locked
    if (locked === LockState.None) {
      meta2d.lock(LockState.DisableEdit)
      mapEditStatus.value = mapEditConfig[LockState.DisableEdit]
    } else if (locked === LockState.DisableEdit) {
      meta2d.lock(LockState.Disable)
      mapEditStatus.value = mapEditConfig[LockState.Disable]
    } else {
      meta2d.lock(LockState.None)
      mapEditStatus.value = mapEditConfig[LockState.None]
    }
  }
  
  /** 预览 */
  function handlePreview() {
    let json = meta2d.data()
    localStorage.setItem("meta2dJSON", JSON.stringify(json))
    router.push({
      path: '/preview'
    })
  }

  onMounted(() => {
    setTimeout(() => {
      min.value = (meta2d.store.options as any).minScale * 100
      max.value = (meta2d.store.options as any).maxScale * 100
      scaleValue.value = +(meta2d.data().scale * 100).toFixed()

      meta2d.on('scale', (data : number) => {
        console.log(data)
        scaleValue.value = +(data * 100).toFixed()
      })
      openFn()
      meta2d.on("opened", openFn)
    }, 100)

  })
</script>

<style scoped>
  .nav-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .nav-item {
    margin-right: 30px;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pointer {
    cursor: pointer;
  }

  .active {
    color: var(--el-color-primary);
  }

  .active svg {
    fill: var(--el-color-primary);
  }

  .scale-result-box {
    text-align: center;
    line-height: 1;
  }

  .icon-svg {
    width: 20px;
    height: 20px;
  }

  .text-center {
    text-align: center
  }

  .font-12 {
    font-size: 12px
  }

  .el-dropdown-link {
    display: flex;
    align-items: baseline;
    justify-content: center;
    outline: none;
  }

  .flex-center {
    display: flex;
    justify-content: flex-start;
    align-items: center
  }

  .l-14 {
    line-height: 14px;
    margin-top: -4px
  }

  .mb-7 {
    margin-bottom: 7px;
  }
</style>